<template>
  <view>
    <uni-list v-if="Object.keys(userInfo)" class="mt20">
      <uni-list-item title="头像" thumb="../../static/img/gfdgfdgb.png" :thumbs="userInfo.userPhoto" @tap="upload" />
      <uni-list-item
        title="性别"
        @click="edit('性别', 'userSex', userInfo.userSex == 0 ? '男' : '女')"
        :rightText="userInfo.userSex == 0 ? '男' : '女'"
        thumb="../../static/img/user/dsfdstb.png"
      />

      <uni-list-item
        title="电话"
        @click="edit('电话', 'userPhone', userInfo.userPhone)"
        :rightText="userInfo.userPhone"
        thumb="../../static/img/user/dsfdstc.png"
      />
      <uni-list-item
        title="邮箱"
        @click="edit('邮箱', 'userEmail', userInfo.userEmail)"
        :rightText="userInfo.userEmail"
        thumb="../../static/img/user/dsfdstd.png"
      />
      <uni-list-item
        title="单位"
        @click="edit('单位', 'unityName', userInfo.unityName)"
        :rightText="userInfo.unityName"
        thumb="../../static/img/user/dsfdste.png"
      />
      <uni-list-item
        title="地址"
        @click="edit('地址', 'userAddress', userInfo.userAddress)"
        :rightText="userInfo.userAddress"
        thumb="../../static/img/user/dsfdstf.png"
      />
    </uni-list>

    <!-- 编辑弹出层 -->
    <view class="fgdftyyxcert" v-if="idddff">
      <view class="dfgdfgyxerr">
        <view class="pd pt20">
          <view class="z6 fz26 title">
            请输入要修改的内容
          </view>
          <view class="mt40 row dfsgfyuyxre">
            <view class="fz26 z3">
              {{ dialogForm.label }}
            </view>
            <view class="col pl20">
              <input
                :value="dialogForm.value"
                @blur="dfgdftyb($event, dialogForm.key)"
              />
            </view>
          </view>
        </view>

        <view class="mt40 row footer-btn">
          <view class="col dfgdfgt" @tap="idddff = false">
            取消
          </view>
          <view class="col dfgdfgt ab" @tap="saveUpdate">
            确定
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import store from "../../store/index.js";
export default {
  data() {
    return {
      userInfo: {  },
      idddff: false,
      dialogForm: {
        value: "",
        key: "",
      },
      formData: {},
    };
  },
  methods: {
    async upload() {
      let that = this;
      uni.chooseImage({
        success: function (res) {
          res.tempFilePaths.map((a) => {
            uni.uploadFile({
              url: "https://www.waibizi.com/file/upload", //仅为示例，非真实的接口地址
              filePath: a,
              name: "file",
              success: (uploadFileRes) => {
                let photo = JSON.parse(uploadFileRes.data).data;
                that.userInfo.userPhoto = "https://www.waibizi.com/" +photo;
                that.formData.userPhoto = photo
                that.saveUpdate()
              },
            });
          });
        },
      });
    },

    async getUserInfo(e) {
      let res = await this.$api.getUserInfo();
      this.userInfo = res.data;
      this.userInfo.userPhoto =
        "https://www.waibizi.com/" + this.userInfo.userPhoto;
    },
    edit(label, key, value) {
      this.idddff = true;
      this.dialogForm = {
        label,
        key,
        value,
      };
    },
    dfgdftyb(e, key) {
      this.formData[key] = e.detail.value;
      if (key == "userSex") {
        if (e.detail.value != "男" && e.detail.value != "女") {
          alert("请输入“男”或者“女”");
          return;
        }

        if (e.detail.value == "男") {
          this.formData[key] = 0;
        } else if (e.detail.value == "女") {
          this.formData[key] = 1;
        }
      }
    },
    async saveUpdate() {
      this.idddff = false;
      let res1 = await this.$api.updateUser(this.formData);
      uni.$emit('updateUserInfo')
      this.getUserInfo();
    },
  },
  mounted() {
    this.getUserInfo();
  },
};
</script>
<style scoped>
.dfsgdttyxe {
  width: 55upx;
  height: 55upx;
}

.dfggrtyxe {
  width: 40upx;
  height: 40upx;
}

.sdfgdgtyxer {
  border-radius: 8upx;
  background: #fff;
}

.fdgfrtyxe {
  width: 44upx;
  height: 44upx;
}

.fsgfdty {
  margin-top: 8upx;
}

.dfsgrfyyy {
  width: 250upx;
}

.fgdftyyxcert {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.dfgdfgyxerr {
  width: 540upx;
  height: 320upx;
  border-radius: 8upx;
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.fdgfdtyxr {
  height: 60upx;
  line-height: 60upx;
  border: 1px solid #e0e0e0;
}

.dfsgfyuyxre {
  line-height: 60upx;
}

/deep/.dfsgfyuyxre .uni-input-input {
  line-height: 60upx;
}

.dfgdfgt {
  line-height: 70upx;
  font-size: 30upx;
  background: #7ab8fb;
  color: #fff;
  text-align: center;
}

.dfgdfgt.ab {
  font-size: 30upx;
  background: #ff5f5f;
}

.title {
  text-align: center;
}

.footer-btn {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
</style>
